
<script setup>
import { ref } from "@vue/reactivity"
import { watch } from "@vue/runtime-core";
import { delRowById, getAllFildsList, getAllRows, getAllTableName } from "../../Api";
import { error, success } from "../../utils/log";
import ControlBar from "./ControlBar.vue"
import Table from "./Table.vue"
import TableList from "./TableList.vue"


    // tableName-choose 
    const tableList = ref([]);
    getAllTableName().then(res=>{
        tableList.value = res.data.list;
    })
    let tableName = ref("message");
    const changeTableName = (name) => {
        tableName.value = name;
    }
    
    // fildsList
    const fildsList = ref([]);
    let rows = ref([]);



    const getList = () => {
        let params = {};
        params.name = tableName.value;
        getAllFildsList(params).then(res=>{
            fildsList.value = res.data.list;
        }).catch(err=>{
            console.log(err);
        })

        params = {};
        params.name = tableName.value;
        getAllRows(params).then((res)=>{
            rows.value = res.data.list;        
        }).catch(err=>{
            console.log(err);
        })
    }
    getList();
    watch(tableName,getList)
    watch(tableName,getList)


    const delRow = async (id) => {
        let params = {};
        params.name = tableName.value;
        params.id = id;
        try {
            let res = await delRowById(params);
            console.log(res);
            getList();
            success("删除成功")
        } catch(e) {
            console.log("e")
            error("删除失败");
        }
        
    }

</script>
 
<template>
    <div class="DataBaseManage-container">
            <div>
                <TableList :list="tableList" :tableName="tableName" @changeTableName="changeTableName"></TableList>
            </div>
            <div>
                <!-- <ControlBar ></ControlBar> -->
                <Table :fildsList="fildsList" :rows="rows" @delRow="delRow"></Table>
            </div>
    </div>
</template>

<style lang='less' scoped>
    .DataBaseManage-container {
        display: flex;
        padding-top: 30px;
        padding-left: 20px;
    }
</style>